<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>audioMotion-analyzer demos</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <header>
        <h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | interactive demos</h1>
        <ul class="header-nav">
            <li><a href="https://audiomotion.dev">Home</a></li>
            <li><a href="https://github.com/hvianna/audioMotion-analyzer">View on GitHub</a></li>
        </ul>
    </header>

    <p>&nbsp;</p>

    <div class="gallery">
        <ul class="gallery-internal">
            <li><img src="media/discrete.png" title="Discrete frequencies">
            <li><img src="media/radial.png" title="Radial spectrum">
            <li><img src="media/dual.png" title="Dual channel combined Graph">
            <li><img src="media/leds.png" title="LED bars">
            <li><img src="media/lumibars.png" title="LumiBars effect">
            <li><img src="media/reflex.png" title="Round bars + Reflex effect">
            <li><img src="media/discrete.png" title="Discrete frequencies">
            <li><img src="media/radial.png" title="Radial spectrum">
            <li><img src="media/dual.png" title="Dual channel combined Graph">
            <li><img src="media/leds.png" title="LED bars">
            <li><img src="media/lumibars.png" title="LumiBars effect">
            <li><img src="media/reflex.png" title="Round bars + Reflex effect">
        </ul>
    </div>

    <p><strong>Note:</strong> except for the <a href="umd.html">UMD demo</a>, these won't work if loaded via <code>file://</code> protocol. See the README file inside the <code>demo/</code> folder for more information.</p>

    <h2><a href="minimal.html">▶ Minimal demo</a></h2>

    <ul>
        <li>A simple demo on how to create and destroy <em>audioMotion-analyzer</em> instances;</li>
        <li>Uses a live stream as audio source (note: streams currently do <strong>NOT</strong> work on <strong>Safari</strong> - see the <a href="https://audiomotion.dev/#/?id=known-issues">known issues</a>);</li>
        <li><a href="umd.html">This alternate version demonstrates how to use the UMD module via global variable.</a></li>
    </ul>

    <h2><a href="fluid.html">▶ Fluid layout demo</a></h2>

    <ul>
        <li>Try all configuration options in real time - resize the window and the analyzer adjusts itself for best resolution (see console for events);</li>
        <li>Example usage of microphone input;</li>
        <li>An additional frequency oscillator node is connected to the analyzer for generating test tones;</li>
        <li>A callback function is used to add custom features using the analyzer data.</li>
    </ul>

    <h2><a href="multi.html">▶ Multiple instances demo</a></h2>

    <ul>
        <li>Three analyzer instances share the same audio source and <em>AudioContext</em>, but each has its own configuration settings.</li>
    </ul>

    <h2><a href="overlay.html">▶ Overlay demo</a></h2>

    <ul>
        <li><em>audioMotion-analyzer</em> is connected to a <code>&lt;video&gt;</code> element and displayed over it with semi-transparent background;
        <li>Fullscreen is handled on the parent container element.</li>
    </ul>

    <p>For more demos, check our <a href="https://codepen.io/collection/ABbbKr">CodePen collection</a>.</p>
</body>
</html>
